<template>
  <div class="mdeditor_box">
    <Editor :value="props.data"
            :plugins="plugins"
            @change="handleChange"
            :locale="zhHans"
            :style="{height:900}"
            class="mdeditor_box_editor_"/>
  </div>
</template>

<script setup lang="ts">
import "bytemd/dist/index.css"; // 引入编辑器样式文件
import zhHans from "bytemd/lib/locales/zh_Hans.json"; // 汉化
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import { Editor, Viewer } from "@bytemd/vue-next";
import { defineProps, ref, withDefaults, defineEmits } from "vue";

const plugins = ref([
  gfm(),
  highlight(),
  // Add more plugins here
]);
const emit = defineEmits(['setData'])

const handleChange = (v: string) => {
  // value.value = v;
  emit('setData', v);
};

interface Props {
  data: string,
}
/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  data: () => "",
});
</script>

<style >
.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {
  display: none;
}
.mdeditor_box {
  //position: relative;
}

.mdeditor_box_editor_ .bytemd {
  height: 530px !important;
  width: 90%;
}
</style>
